<template>
  <div class="meeting-details combground">
    <div class="container">
      <div class="breadcrumb">
        <img src="~/assets/images/breadcrumb.png" />
        当前位置：咨询中心<img src="@/assets/images/home/icon.png" alt="">
        展览活动<img src="@/assets/images/home/icon.png" alt="">展览详情
      </div>

      <div class="content">
        <div class="page-content">
          <div class="page-head">
            <div class="title">{{ details.title || '--' }}</div>
            <div class="date-and-read">
              <div class="date">
                <img src="~/assets/images/time.png" alt="" />
                时间：{{ details.date || '--' }}
              </div>
              <div class="read">
                <img src="~/assets/images/read.png" alt="" />
                {{ details.read || 0 }}人已读
              </div>

              <div class="share">
                分享：<img class="qq" src="~/assets/images/qq.png" alt="" />
                <img class="wechat" src="~/assets/images/wechat1.png" alt="" />
                <img class="email" src="~/assets/images/email1.png" alt="" />
              </div>
            </div>
          </div>
          <!-- //TODO 差上一篇下一篇接口-->
          <div class="date-and-position">
            <div class="date">
              <img src="~/assets/images/date.png" alt="" />
              2020-03-21 至 2020-03-31
            </div>
            <div class="position">
              <img src="~/assets/images/position.png" alt="" />
              成都市武侯区
            </div>
          </div>
          <div class="page-body" v-html="details.content"></div>
          <div class="btns">
            <m-button width="235" @click="showCarousel">报名</m-button>
          </div>
          <div class="page-footer">
            <a href="javascript:;" class="prev">上一篇：{{ details.prev.title }}</a>
            <a href="javascript:;" class="next">下一篇：{{ details.next.title }}</a>
          </div>
        </div>
        <div class="page-others">
          <div class="page-prev" v-if="details.prev">
            <div class="btn">上一篇</div>
            <div class="body">
              <img src="~/assets/images/to-require.jpg" alt="" />
              <div class="title">{{ details.prev.title }}</div>
              <div class="time">
                <img src="~/assets/images/time.png" alt="" />
                时间：{{ details.prev.date }}
              </div>
            </div>
          </div>
          <div class="page-next" v-if="details.next">
            <div class="btn">下一篇</div>
            <div class="body">
              <img src="~/assets/images/to-require.jpg" alt="" />
              <div class="title">{{ details.next.title }}</div>
              <div class="time">
                <img src="~/assets/images/time.png" alt="" />
                时间：{{ details.next.date }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel" v-show="carousel">
      <m-carousel :imgs="[{}, {}, {}]" @close="handleClose" />
    </div>
  </div>
</template>

<script>
import MButton from "@/components/common/m-button/MButton"
import MCarousel from "@/components/common/m-carousel/MCarousel"

export default {
  name: "MeetingDetails",
  components: { MCarousel, MButton },
  data() {
    return {
      details: {
        title: "第20届成都包装材料展览会",
        date: "2020-03-12 23:12:32",
        read: "124",
        content: `
          <p style="color: red;">content</p>
        `,
        prev: {
          title: "包装设计四大新趋势",
          date: "2020-05-12 15:25:38",
        },
        next: {
          title: "包装设计四大新趋势:融入更多数字",
          date: "2020-05-12 15:25:38",
        },
      },
      carousel: false
    }
  },
  methods: {
    showCarousel() {
      this.carousel = !this.carousel
    },
    handleClose() {
      this.carousel = false
    },
    // TODO 差接口
    getDetailsData(){}
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.meeting-details {
  color: #666;
  padding-top: 50px;
  padding-bottom: 80px;

  .breadcrumb {
    padding-bottom: 50px;
    display: flex;
    align-items: center;

    img {
      margin-right: 5px;
    }
  }

  .content {
    display: flex;
    justify-content: space-between;

    .page-content {
      width: 73%;
      background-color: #fff;
      padding: 30px;

      .page-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-bottom: solid 1px rgb(238, 238, 238);
        position: relative;

        .title {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 30px;
        }

        .date-and-read {
          width: 100%;
          color: #969696;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 30px;

          .date,
          .read {
            display: flex;
            align-items: center;
            margin-right: 15px;

            img {
              margin-right: 5px;
            }
          }

          .share {
            position: absolute;
            right: 0;
            display: flex;
            align-items: center;

            .qq,
            .wechat,
            .email {
              margin-left: 5px;
              margin-right: 10px;
            }
          }
        }
      }

      .date-and-position {
        height: 55px;
        background-color: rgb(243, 244, 247);
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        .date,
        .position {
          display: flex;
          align-items: center;

          img {
            margin-right: 10px;
          }
        }
      }

      .page-body {
        padding: 15px 30px;
      }

      .btns {
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
      }

      .page-footer {
        padding: 15px 30px;
        border-top: solid 1px rgb(238, 238, 238);

        a {
          display: block;
          margin-bottom: 15px;

          &:hover {
            color: $theme-color-1;
          }
        }
      }
    }

    .page-others {
      width: 300px;

      .page-prev,
      .page-next {
        height: 370px;
        background-color: #fff;
        font-size: 14px;

        .btn {
          height: 48px;
          line-height: 48px;
          color: #fff;
          text-align: center;
          cursor: pointer;
        }

        .body {
          padding: 30px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          > img {
            width: 245px;
            height: 172px;
            margin-bottom: 15px;
          }

          .title {
            height: 42px;
            @include text-omitted(2);
            font-size: 16px;
            margin-bottom: 20px;
          }

          .time {
            display: flex;

            img {
              margin-right: 5px;
            }
          }
        }
      }

      .page-prev {
        margin-bottom: 30px;

        .btn {
          background-color: $theme-color-1;
        }
      }

      .page-next {
        .btn {
          background-color: rgb(0, 133, 232);
        }
      }
    }
  }

  .carousel {
    width: 100%;
    height: 700px;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
  }
}
</style>
